<html>
<head>
	<title>芭蕉花管理平台-积分商城商品管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="SHORTCUT ICON" href="/img/favicon.ico">
	<script type="text/javascript">
		var pathname = window.location.pathname;
		if (pathname != "/mobile/home.html") {
			location.href = '/';
		}
	</script>
	<style type="text/css">
		.search-box.condition-hidden .search-condition {display: none;}
		.btn {appearance: none; -moz-appearance: none; -webkit-appearance: none;}
		.card {border-radius: 0; border-left: 0; border-right: 0; overflow: visible;}
		.card-header {padding: 0;border-radius: 0; background-color: #fff;}
		.card-header .btn {border-radius: 0; background-color: rgba(0,0,0,.03);}
		.card-header .btn.collapsed {background-color: #fff;}
		.card-body {padding: 0.5rem;}
		.card-img-box {text-align: center; padding-bottom: 0.25rem;}
		.card-img {width: 4rem; height: 4rem; max-width: 100%; padding : 2px; box-shadow: 1px 2px 10px #bbb;}
		.card-name {font-size: 1rem; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.25rem;}
		.card-app {font-size: .875em; color: #777;}
		.card-app .type {display: inline-block; width: 50%; text-align: left;}
		.card-app .num {display: inline-block; width: 50%; text-align: right;}
		.card-app {font-size: .875em; color: #777;}
		.card-app .money {display: inline-block; width: 50%; text-align: left;}
		.card-app .point {display: inline-block; width: 50%; text-align: right;}
		.card-status .status {display: inline-block; width: 50%; text-align: left; padding: .25rem;}
		.card-status .sort {display: inline-block; width: 50%; text-align: right;}
		ul.card-opt {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding: 0; margin: 0; border-top: 1px solid #ccc;}
		ul.card-opt>li {position: relative; display: block; padding-top: 3em; -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;}
		ul.card-opt>li:active {background: rgba(0,123,255,.15);}
		ul.card-opt>li>i {position: absolute; top: .25em; left: 0; right: 0; display: block; text-align: center; line-height: 1em; font-size: 2em;}
		ul.card-opt>li>span {display: block; text-align: center;}
		#dataInfo {margin-top: .5rem; font-size: .6rem; color: #777; text-align: right;}
		#pageList {margin-top: 1.25rem;}
		#pageList nav {display: inline-block;}
		#pageList .page-link:hover {z-index: 2; color: #007bff; text-decoration: none; background-color: #fff; border-color: #dee2e6;}
		#pageList .page-link:active {z-index: 2; color: #0056b3; text-decoration: none; background-color: #e9ecef; border-color: #dee2e6;}
		#pageList .page-link:focus {box-shadow: none;}
	</style>
</head>
<body>
	<div class="container">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="#" onclick="goMenu();return false;"><i class="fa fa-chevron-left"></i><span style="padding-left: 10px;">菜单</span></a></li>
				<li class="breadcrumb-item active" aria-current="page">积分商城商品管理</li>
			</ol>
		</nav>
		<div class="row collapse" id="searchBox">
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<select class="form-control" id="searchType">
						<option value="">选择类型</option>
						<option value="1">京东购物卡</option>
						<option value="2">电话充值卡</option>
						<option value="3">实物</option>
					</select>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<input type="text" id="searchKey" class="form-control" placeholder="输入商品名称搜索"/>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<button type="button" onclick="search();"  class="btn btn-block btn-primary">搜索</button>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xl-12">
				<div class="form-group">
					<a type="button" id="searchBoxCollapse" class="btn btn-block btn-light" data-toggle="collapse" data-target="#searchBox" aria-expanded="false" aria-controls="searchBox"><span style="padding-right: 1rem; font-size: 0.875rem; color: #999;">搜索条件</span><i class="fa fa-angle-double-down text-primary" aria-hidden="true"></i> <i class="fa fa-angle-double-up text-primary" aria-hidden="true"></i></a>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<button type="button" onclick="showAddDialog()"  class="btn btn-block btn-info">新增</button>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-xl-12">
				<div class="accordion" id="pointMallListBox">
				</div>
			</div>
		</div>
		<div id="dataInfo">
		</div>
		
		<div class="row" id="pageList" style="display: none;">
			<div class="col-xl-12 text-center">
				<nav aria-label="...">
					<ul class="pagination">
						<li class="page-item previous disabled">
							<a class="page-link" href="#" onclick="goPrevious();return false;">上一页</a>
						</li>
						<li class="page-item next disabled">
							<a class="page-link" href="#" onclick="goNext();return false;">下一页</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>

<!-- 【编辑】弹出窗内容 -->
<div class="modal fade" id="editPanel" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="editTitle"></h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form id="editForm">
					<input type="hidden" id="id" name="id">
					<div class="form-group" >
						<label for="goodsName" style="color: red;">*商品名称：</label>
						<input class="form-control" type="text" name="name" id="goodsName" >
					</div>
					<div class="form-group" >
						<label for="type" style="color: red;">*商品类型：</label>
						<select class="form-control" name="type" id="type" onchange="changeGoodCatetary()">
							<option value="1">京东购物卡</option>
							<option value="2">电话充值卡</option>
							<option value="3">实物</option>
						</select>
					</div>
					<div class="form-group" >
						<label for="money" style="color: red;">*商品单价（元）：</label>
						<input class="form-control" placeholder="" type="number" name="money" id="money" min="0">
					</div>
					<div class="form-group" >
						<label for="point" style="color: red;">*所需积分：</label>
						<input class="form-control" placeholder="" type="number" name="point" id="point" min="0">
					</div>
					<div class="form-group" >
						<label for="number" style="color: red;">*库存数量：</label>
						<input class="form-control" placeholder="" type="number" name="number" id="number" min="0">
					</div>
					<div class="form-group" >
						<label for="uploadFile" style="color: red;">*商品图片：</label>
						<img id="pictue1" style="width: 100%;">
						<input class="form-control-file" type="file" id="uploadFile1" accept="image/png,image/gif,image/jpeg,image/jpg" onchange="uploadPic(1)"/>
						<input type="hidden" id="img1">
						<img id="pictue2" style="width: 100%;">
						<input class="form-control-file" type="file" id="uploadFile2" accept="image/png,image/gif,image/jpeg,image/jpg" onchange="uploadPic(2)"/>
						<input type="hidden" id="img2">
						<img id="pictue3" style="width: 100%;">
						<input class="form-control-file" type="file" id="uploadFile3" accept="image/png,image/gif,image/jpeg,image/jpg" onchange="uploadPic(3)"/>
						<input type="hidden" id="img3">
						<input type="hidden" id="picture" name="picture">
					</div>
					<div class="form-group">
						<label for="status">商品状态：</label>
						<select class="form-control" id="status" name ="status">
							<option value="0">上架</option>
							<option value="1">下架</option>
						</select>
					</div>
					<div class="form-group">
						<label for="sort">排序：</label>
						<input  class="form-control" type="number" name="sort" id="sort">
					</div>
					<div class="form-group" >
						<label for="remark">兑换须知：</label>
						<textarea class="form-control" rows="4" id="remark" name="remark"></textarea>
					</div>
					<div class="form-group" >
						<label for="instruction">使用说明：</label>
						<textarea class="form-control" rows="4" id="instruction" name="instruction"></textarea>
					</div>
					<div class="form-group" id="detailPictureBox">
						<label for="uploadDetailFile1">详情图片：</label>
						<img id="pictue11" style="width: 100%;">
						<input class="form-control-file" type="file" id="uploadFile11" accept="image/png,image/gif,image/jpeg,image/jpg" onchange="uploadPic(11)"/>
						<input type="hidden" id="img11">
						<img id="pictue12" style="width: 100%;">
						<input class="form-control-file" type="file" id="uploadFile12" accept="image/png,image/gif,image/jpeg,image/jpg" onchange="uploadPic(12)"/>
						<input type="hidden" id="img12">
						<img id="pictue13" style="width: 100%;">
						<input class="form-control-file" type="file" id="uploadFile13" accept="image/png,image/gif,image/jpeg,image/jpg" onchange="uploadPic(13)"/>
						<input type="hidden" id="img13">
						<input type="hidden" id="detailPicture" name="detailPicture">
					</div>
				</form>
			</div>
			<div class="modal-footer" style="display: block; text-align: center">
				<button type="button" class="btn btn-light" style="width: 40%; max-width: 10rem;" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-info" style="width: 40%; max-width: 10rem;" onclick="confirmEdit();">确定</button>
			</div>
		</div>
	</div>
</div>


<!-- page script -->
<script>
	var maxCount = 10;
	var totalPages = 0;
	var page = 1;
	var searchClick = false;

	$(document).ready(function() {
		//加载数据
		getData();
	});

	function goMenu() {
		getHtml('/mobile/menu.html');
	}

	function search() {
		searchClick = true;
		totalPages = 0;
		page = 1;
		getData();
	}
	
	function goPrevious() {
		if (page > 1) {
			page = page - 1;
			getData();
		}
	}
	
	function goNext() {
		if (page < totalPages) {
			page = page + 1;
			getData();
		}
	}

	function getData(){
		var searchType = $("#searchType").val();
		var searchKey = $("#searchKey").val();
		var startIndex = (page - 1) * maxCount;

		var url = "/point/getPointMallList";
		params = {
				"key" : searchKey,
				"flag" : searchType,
				"start" : startIndex,
				"length" : maxCount,
				"draw" : page
		};
		getMapData(url, params, function(data, result) {
			if (result == "success") {
				var dataList = data.data;
				var totalCount = data.recordsTotal;
				if ((totalCount % maxCount) > 0) {
					totalPages = parseInt(totalCount / maxCount) + 1;
				} else {
					totalPages = parseInt(totalCount / maxCount);
				}
				if (page <= 1) {
					$("#pageList .previous").addClass("disabled");
				} else {
					$("#pageList .previous").removeClass("disabled");
				}
				if (page >= totalPages) {
					$("#pageList .next").addClass("disabled");
				} else {
					$("#pageList .next").removeClass("disabled");
				}
				if (totalPages <= 1) {
					$("#pageList").hide();
				} else {
					$("#pageList").show();
				}

				var dataHtml = '';
				for (let i = 0; i < dataList.length; i++) {
					let dataRecord = dataList[i];
					let id = dataRecord.id;
					let status = dataRecord.status;
					let type = dataRecord.type;
					let typeStr = "";
					if (type == 1) {
						typeStr = "京东购物卡";
					} else if (type == 2) {
						typeStr = "电话充值卡";
					} else if (type == 3) {
						typeStr = "实物";
					}
					let picture = dataRecord.picture;
					let pictureUrls;
					if (picture != '') {
						pictureUrls = picture.split("$");
					} else {
						pictureUrls = new Array("");
					}
					let detailPicture = dataRecord.detail_picture;
					let detailPictureUrls;
					if (detailPicture != '') {
						detailPictureUrls = detailPicture.split("$");
					} else {
						detailPictureUrls = new Array("");
					}

					dataHtml += '<div class="card" id="mall' + i + '">';
					dataHtml += '<div class="card-header" id="mallHeader' + i + '">';
					dataHtml += '<div>';
					dataHtml += '<div class="btn btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#mallCollapse' + i + '" aria-expanded="true" aria-controls="mallCollapse' + i + '">';
					dataHtml += '<div class="card-name badge badge-warning">' + dataRecord.name + '</div>';
					dataHtml += '<div class="card-app"><span class="type">' + typeStr + '</span><span class="num">' + dataRecord.number + '个' + '</span></div>';
					dataHtml += '<div class="card-app"><span class="money">' + dataRecord.money + '元' + '</span><span class="point">' + dataRecord.point + '积分' + '</span></div>';
					dataHtml += '<div class="card-status">';
					if (status == 1) {
						dataHtml += '<div class="status"><span class="badge badge-light">下架</span></div>';
					} else if (status == 0) {
						dataHtml += '<div class="status"><span class="badge badge-success">上架</span></div>';
					}
					dataHtml += '<span class="sort">' + dataRecord.sort + '</span>';
					dataHtml += '</div>';

					dataHtml += '</div>';
					dataHtml += '</div>';
					dataHtml += '</div>';
					
					dataHtml += '<div id="mallCollapse' + i + '" class="collapse" aria-labelledby="mallHeader' + i + '" data-parent="#pointMallListBox">';
					dataHtml += '<div class="card-body">';
					dataHtml += '<div class="card-img-box">';
					for (let j = 0; j < pictureUrls.length; j++) {
						dataHtml += '<img src="' + pictureUrls[j] + '" class="card-img" onclick="maxImg(' + "'" + pictureUrls[j] + "'" + ",'" + '商品' + "'" + ')" alt="商品">';
					}
					dataHtml += '</div>';
					if (detailPicture != '') {
						dataHtml += '<div class="card-img-box">';
						for (let j = 0; j < detailPictureUrls.length; j++) {
							dataHtml += '<img src="' + detailPictureUrls[j] + '" class="card-img" onclick="maxPic(' + "'" + detailPictureUrls[j] + "'" + ')" alt="商品">';
						}
						dataHtml += '</div>';
					}

					dataHtml += '<ul class="card-opt">';
					dataHtml += '<li class="text-primary" onclick="showEditDialog(' + id + ')"><i class="fa fa-edit"></i><span>编辑</span></li>';
					dataHtml += '<li class="text-danger" onclick="showDeleteDialog(' + id + ')"><i class="fa fa-trash-o"></i><span>删除</span></li>';
					dataHtml += '</ul>';
					
					dataHtml += '</div>';
					dataHtml += '</div>';
					
					dataHtml += '</div>';
				}
				$("#pointMallListBox").html(dataHtml);
				if (totalCount > 0) {
					let startNum = startIndex + 1;
					let endNum = startIndex + dataList.length;
					$("#dataInfo").html('从 ' + startNum + ' 到 ' + endNum + ' /共 ' + totalCount + ' 条数据');
					if (searchClick) {
						$("#searchBoxCollapse").click();
					}
				} else {
					$("#dataInfo").html('没有检索到数据');
				}
				document.body.scrollTop = document.documentElement.scrollTop = 0;
				for (let i = 0; i < dataList.length; i++) {
					$("#mallCollapse" + i).on('show.bs.collapse', function () {
						$(this).parent().attr("style", "overflow: visible; z-index: 1; box-shadow: 1px 2px 10px #2aaf98;");
					});
					$("#mallCollapse" + i).on('hide.bs.collapse', function () {
						$(this).parent().removeAttr("style");
					});
				}
			}
			searchClick = false;
		}, true);
	}

	function showAddDialog() {
		$("#pictue1").attr("src","");
		$("#pictue2").attr("src","");
		$("#pictue3").attr("src","");
		$("#pictue11").attr("src","");
		$("#pictue12").attr("src","");
		$("#pictue13").attr("src","");

		$("#id").val("");
		$("#goodsName").val("");
		$("#money").val("");
		$("#point").val("");
		$("#type").val("1");
		$("#number").val("");
		$("#status").val("0");
		$("#sort").val("");
		$("#remark").val("");
		$("#instruction").val("");
		$("#picture").val("");
		$("#detailPicture").val("");
		$("#img1").val("");
		$("#img2").val("");
		$("#img3").val("");
		$("#img11").val("");
		$("#img12").val("");
		$("#img13").val("");
		changeGoodCatetary();
		$("#editTitle").text("新增商品");
		$("#editPanel").modal("show");
	}

	function showEditDialog(id) {
		$("#pictue1").attr("src","");
		$("#pictue2").attr("src","");
		$("#pictue3").attr("src","");
		$("#pictue11").attr("src","");
		$("#pictue12").attr("src","");
		$("#pictue13").attr("src","");
		$("#picture").val("");
		$("#detailPicture").val("");
		$("#img1").val("");
		$("#img2").val("");
		$("#img3").val("");
		$("#img11").val("");
		$("#img12").val("");
		$("#img13").val("");
		let url = "/point/getPointMallById";
		let params = {
				"id" : id
		}
		getMapData(url, params, function(data, result) {
			if (result == "success") {
				let mall = data.mall;
				$("#id").val(mall.id);
				$("#goodsName").val(mall.name);
				$("#money").val(mall.money);
				$("#point").val(mall.point);
				$("#type").val(mall.type);
				$("#number").val(mall.number);
				$("#status").val(mall.status);
				$("#sort").val(mall.sort);
				$("#remark").val(mall.remark);
				$("#instruction").val(mall.instruction);
				
				let imgs = mall.picture.split("$");
				$("#pictue1").attr("src",imgs[0]);
				$("#img1").val(imgs[0]);
				if (mall.type == 3) {
					if (imgs.length >= 2) {
						$("#pictue2").attr("src",imgs[1]);
						$("#img2").val(imgs[1]);
					}
					if (imgs.length >= 3) {
						$("#pictue3").attr("src",imgs[2]);
						$("#img3").val(imgs[2]);
					}
					if (mall.detailPicture != "") {
						let detailImgs = mall.detailPicture.split("$");
						if (detailImgs.length >= 1) {
							$("#pictue11").attr("src",detailImgs[0]);
							$("#img11").val(detailImgs[0]);
						}
						if (detailImgs.length >= 2) {
							$("#pictue12").attr("src",detailImgs[1]);
							$("#img12").val(detailImgs[1]);
						}
						if (detailImgs.length >= 3) {
							$("#pictue13").attr("src",detailImgs[2]);
							$("#img13").val(detailImgs[2]);
						}
					}
				}
				changeGoodCatetary();
				$("#editTitle").text("编辑商品");
				$("#editPanel").modal("show");
			}
		}, true);
	}

	function confirmEdit() {
		let goodsName = $("#goodsName").val();
		if( $.trim(goodsName) == ""){
			showErrorMessageTip("商品名称不能为空！", "name");
			return ;
		}
		let type = $("#type").val();
		if( $.trim(type) == ""){
			showErrorMessageTip("商品类型不能为空！", "type");
			return ;
		}
		let money = $("#money").val();
		if( $.trim(money) == ""){
			showErrorMessageTip("商品单价不能为空！", "money");
			return ;
		} else if (money <= 0) {
			showErrorMessageTip("商品单价必须大于0！", "money");
			return ;
		}
		let point = $("#point").val();
		if( $.trim(point) == ""){
			showErrorMessageTip("所需积分不能为空！", "point");
			return ;
		} else if (point <= 0) {
			showErrorMessageTip("所需积分必须大于0！", "point");
			return ;
		}
		let number = $("#number").val();
		if( $.trim(number) == ""){
			showErrorMessageTip("库存数量不能为空！", "number");
			return ;
		} else if (number <= 0) {
			showErrorMessageTip("库存数量必须大于0！", "number");
			return ;
		}
		let picture = "";
		let img1 = $("#img1").val();
		if (img1 != "") {
			if (picture != "") {
				picture += "$"
			}
			picture += img1;
		}
		if (type == 3) {
			let img2 = $("#img2").val();
			if (img2 != "") {
				if (picture != "") {
					picture += "$"
				}
				picture += img2;
			}
			let img3 = $("#img3").val();
			if (img3 != "") {
				if (picture != "") {
					picture += "$"
				}
				picture += img3;
			}
		}
		if( $.trim(picture) == ""){
			showErrorMessageTip("商品图片不能为空！", "#uploadFile1");
			return ;
		}
		$("#picture").val(picture);
		if (type == 3) {
			let detailPicture = "";
			let img11 = $("#img11").val();
			if (img11 != "") {
				if (detailPicture != "") {
					detailPicture += "$"
				}
				detailPicture += img11;
			}
			let img12 = $("#img12").val();
			if (img12 != "") {
				if (detailPicture != "") {
					detailPicture += "$"
				}
				detailPicture += img12;
			}
			let img13 = $("#img13").val();
			if (img13 != "") {
				if (detailPicture != "") {
					detailPicture += "$"
				}
				detailPicture += img13;
			}
			$("#detailPicture").val(detailPicture);
		}
		let url = "/point/updPointMall";
		let params = JSON.stringify($("#editForm").serializeObject());
		let contentType = "application/json;charset=UTF-8";
		getMapData(url, params, function(data, result) {
			if (result == "success") {
				$("#editPanel").modal("hide");
				getData();
			}
		}, true, false, false, contentType);
	}

	function showDeleteDialog(id) {
		showConfirmBox("确定要删除吗？", function(result) {
			if (result == "yes") {
				let url = "/point/deletePointMall";
				let params = {
						"id" : id
				}
				getMapData(url, params, function(data, result) {
					if (result == "success") {
						getData();
					}
				}, true);
			}
		});
	}

	function changeGoodCatetary() {
		let type = $("#type").val();
		if (type == 3) {
			$("#pictue2").show();
			$("#pictue3").show();
			$("#pictue11").show();
			$("#pictue12").show();
			$("#pictue13").show();
			$("#uploadFile2").show();
			$("#uploadFile3").show();
			$("#uploadFile11").show();
			$("#uploadFile12").show();
			$("#uploadFile13").show();
			$("#detailPictureBox").show();
		} else {
			$("#pictue2").hide();
			$("#pictue3").hide();
			$("#pictue11").hide();
			$("#pictue12").hide();
			$("#pictue13").hide();
			$("#uploadFile2").hide();
			$("#uploadFile3").hide();
			$("#uploadFile11").hide();
			$("#uploadFile12").hide();
			$("#uploadFile13").hide();
			$("#detailPictureBox").hide();
		}
	}

	//上传图片
	function uploadPic(pic) {
		if (pic != 1 && pic != 2 && pic != 3 && pic != 11 && pic != 12 && pic != 13) {
			return;
		}
		var formData=new FormData();
		formData.append("pic",document.getElementById("uploadFile" + pic).files[0]);
		formData.append("type",4);
		$.ajax({
			type : 'post',
			url : "/upload/uploadPicFile",
			data: formData,
			contentType: false,
			processData: false,
			success : function(data) {
				let error = data.error;
				let message = data.message;
				if (error) {
					showErrorMessageBox(message);
				} else {
					let url = data.data.url;
					$("#pictue" + pic).attr("src",url);
					$("#img" + pic).val(url)
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				showErrorMessageBox("请求超时，请重试");
			}
		});
	}

</script>
</body>
</html>
